<template>
  <div>
    <h2>修改个人信息</h2>
    <div class="newmessage">
      <h3>
        您的账号为:
        <span class="spancolor">{{ salesmans.userName }}</span>
      </h3>
      <div class="boxinput1 boxinput">
        <span>原密码:</span>
        <input
          type="text"
          class="input1"
          placeholder="请输入原密码"
          v-model.lazy="salesmans.password"
        />
        <span :class="{ inputshow1: swich1 }" class="hide"
          >您的密码输入有误</span
        >
      </div>
      <div class="boxinput2 boxinput">
        <span>新密码:</span>
        <input
          type="text"
          class="input1"
          placeholder="请输入新密码"
          v-model.lazy="salesmans.newPassword"
        />
        <span :class="{ inputshow2: swich2 }" class="hide"
          >您的密码格式有误</span
        >
      </div>
      <div class="boxinput3 boxinput">
        <span>新号码:</span>
        <input
          type="text"
          class="input1"
          placeholder="请输入新号码"
          v-model.lazy="salesmans.phones"
        />
        <span :class="{ inputshow3: swich3 }" class="hide"
          >您的手机格式有误</span
        >
      </div>
      <div class="boxinput">
        <a href="javascript:;" class="reda" @click="updateOneSalesman()"
          >确认修改</a
        >
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import api from "../../../network/apis/api.js";
export default {
  data() {
    return {
      salesmans: {
        userName: "",
        password: "",
        newPassword: "",
        _id: "",
        usedpassword: "",
        phones: "",
      },
      swich1: false,
      swich2: false,
      swich3: false,
    };
  },
  created() {
    this.salesmans.userName = localStorage.getItem("userName");
    this.salesmans._id = localStorage.getItem("_id");
  },
  mounted() {
    this.getOneSalesman();
  },
  methods: {
    async updateOneSalesman() {
      if (this.salesmans.password == this.salesmans.usedpassword) {
        if (this.salesmans.newPassword.length >= 3) {
          const { data } = await api.salesmans.updatePasswordSalesman(
            this.salesmans
          );
          this.$message({
            message: "修改密码成功",
            type: "success",
          });
        } else {
          this.swich2 = true;
        }
      } else {
        this.swich1 = true;
      }
    },
    async getOneSalesman() {
      const { data } = await api.salesmans.getOneSalesman(this.salesmans._id);
      this.salesmans.usedpassword = data.data.password;
    },
  },
};
</script>

<style scoped lang="scss">
.newmessage {
  width: 100%;
  height: 400px;
  margin-top: 20px;
  h3 {
    .spancolor {
      color: #ef772e;
      margin-left: 14px;
    }
  }
  .boxinput {
    margin-top: 20px;
    span {
      font-weight: 500;
      color: black;
      font-size: 18px;
    }
    .input1 {
      border: 1px solid gray;
      width: 200px;
      height: 30px;
      font-size: 12px;
      font-weight: 300;
      color: gray;
      margin-left: 10px;
      padding-left: 10px;
    }
    .hide {
      opacity: 0;
      color: red;
      font-size: 12px;
    }
    .inputshow2 {
      color: red;
      font-size: 12px;
      opacity: 1;
    }
    .inputshow3 {
      color: red;
      font-size: 12px;
      opacity: 1;
    }
    .reda {
      display: block;
      width: 280px;
      height: 30px;
      color: white;
      background-color: crimson;
      text-align: center;
      line-height: 30px;
    }
  }
  .boxinput1 {
    .inputshow1 {
      color: red;
      font-size: 12px;
      opacity: 1;
    }
  }
  .boxinput2 {
    .inputshow2 {
      color: red;
      font-size: 12px;
      opacity: 1;
    }
  }
  .boxinput3 {
    .inputshow3 {
      color: red;
      font-size: 12px;
      opacity: 1;
    }
  }
}
</style>
